<template>
  <div>
    <van-nav-bar title="意见反馈" left-arrow @click-left="onClickLeft" />
    <textarea
      class="textarea"
      type="textarea"
      name
      id
      cols="60"
      rows="10"
      placeholder="请输入您的意见"
      v-model="content"
      :maxlength="maxLen"
    ></textarea>
    <p class="max-len">{{content.length}}/{{maxLen}}</p>
    <van-button class="btn" type="default">提交</van-button>
  </div>
</template>

<script>
import { NavBar, Cell, Button } from "vant";
export default {
  data() {
    return {
      maxLen: 500,
      content: ""
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [Button.name]: Button
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
html,
body {
  background: white;
}
.button {
  width: 90%;
  margin: 60px auto;
}
.btn {
  width: 80%;
  background: #eb6100;
  color: #fff;
  font-size: 17px;
  border-radius: 5px;
  margin: 10%;
}
.textarea {
  margin: 5%;
  border: 1px solid #f6f6f6;
}
.max-len {
  font-size: 24px;
  color: #b7b7b7;
  text-align: right;
  margin: 10px 40px 0 0;
}
</style>